<template>
    <div class="ShowContentWrap" :style="{ 'flex-direction': flexDirection, ...styleObj(formVal.showType, 'boxWrap') }">
        <div class="ShowContentWrap-img" v-if="isShowImg"
            :style="styleObj(formVal.showType, 'img', formVal.imgPosition)">
            <div class="ShowContentWrap-img-before">
                <PPTUpImg dataIndex="images" :onChangeForm="onChangeForm" :formVal="formVal"></PPTUpImg>
            </div>
        </div>
        <div class="ShowContentWrap-info"
            :style="styleObj(formVal.showType, 'wrap', formVal.imgPosition, formVal.fill)">
            <div class="ShowContentWrap-info-header" v-if="isShowText" :style="styleObj(formVal.showType, 'header')">
                <div class="ShowContentWrap-info-header-title">
                    <a-row align="middle" type="flex">
                        <a-col :span="3" style="text-align: center;">
                            标题
                            <a-popover placement="topRight" trigger="click">
                                <template slot="content">
                                    <a-row :gutter="[0, 12]">
                                        <a-col :span="6">字体</a-col>
                                        <a-col :span="18">
                                            <a-select v-model="formVal.titleSet.family"
                                                :options="[{ label: '仿宋', value: 'fangsong', }, { label: '黑体 ', value: 'heiti', }, { label: '默认 ', value: '', },]"
                                                style="width: 100%;"></a-select>
                                        </a-col>
                                        <a-col :span="6">字号</a-col>
                                        <a-col :span="18">
                                            <a-select v-model="formVal.titleSet.fontSize"
                                                :options="[{ label: '15号', value: 'font15', }, { label: '18号', value: 'font18', }, { label: '20号', value: 'font20', }, { label: '22号', value: 'font22', }, { label: '24号', value: 'font24', }]"
                                                style="width: 100%;"></a-select>
                                        </a-col>
                                    </a-row>
                                </template>
                                <span slot="title">
                                    标题设置
                                </span>
                                <a-icon type="setting" style="cursor: pointer;"></a-icon>
                            </a-popover>
                        </a-col>
                        <a-col :span="21">
                            <a-input placeholder="请输入标题" v-model="formVal.title"></a-input>
                        </a-col>
                    </a-row>
                </div>
                <div class="ShowContentWrap-info-header-button">
                    <a-space>
                        <a-space v-if="formVal.fill == 'text'">
                            <a-button @click="handlerClick('add')">添加数据</a-button>
                        </a-space>
                        <a-space v-else-if="formVal.fill == 'table'">
                            <a-button @click="handlerTableClick('column')">添加列</a-button>
                            <a-button @click="handlerTableClick('row')">添加行</a-button>
                        </a-space>
                        <a-popover placement="topRight" trigger="click">
                            <template slot="content">
                                <a-row :gutter="[0, 12]">
                                    <a-col :span="6">字体</a-col>
                                    <a-col :span="18">
                                        <a-select v-model="formVal.contentSet.family"
                                            :options="[{ label: '仿宋', value: 'fangsong', }, { label: '黑体 ', value: 'heiti', }, { label: '默认 ', value: '', },]"
                                            style="width: 100%;"></a-select>
                                    </a-col>
                                    <a-col :span="6">字号</a-col>
                                    <a-col :span="18">
                                        <a-select v-model="formVal.contentSet.fontSize"
                                            :options="[{ label: '15号', value: 'font15', }, { label: '18号', value: 'font18', }, { label: '20号', value: 'font20', }, { label: '22号', value: 'font22', }, { label: '24号', value: 'font24', }]"
                                            style="width: 100%;"></a-select>
                                    </a-col>
                                </a-row>
                                <!-- <a-row :gutter="[0, 12]">
                                    <a-col :span="6">表格</a-col>
                                    <a-col :span="18">
                                        <a-select v-model="formVal.contentSet.fontSize"
                                            :options="[{ label: '15号', value: 'font15', }, { label: '18号', value: 'font18', }, { label: '20号', value: 'font20', }, { label: '22号', value: 'font22', }, { label: '24号', value: 'font24', }]"
                                            style="width: 100%;"></a-select>
                                    </a-col>
                                </a-row> -->
                            </template>
                            <span slot="title">
                                内容设置
                            </span>
                            <a-button icon="setting"></a-button>
                        </a-popover>
                    </a-space>
                </div>
            </div>
            <a-form-model :model="formVal" v-if="isShowText">
                <div class="ShowContentWrap-info-wrap">
                    <div class="ShowContentWrap-info-wrap-text" v-if="formVal.fill == 'text'"
                        :style="styleObj(formVal.showType, 'text')">
                        <div class="ShowContentWrap-info-wrap-text-row" v-for="(item, index) in formVal.textInfo"
                            :key="`${index}`">
                            <a-row :gutter="[6, 12]">
                                <a-col :span="6">
                                    <a-input v-model="item.label" :disabled="item.disabled" placeholder="请输入"></a-input>
                                </a-col>
                                <a-col :span="16">
                                    <a-input v-model="item.value" placeholder="请输入"></a-input>
                                </a-col>
                                <a-col :span="2">
                                    <!-- <a-tooltip title="删除"> -->
                                    <a-button type="link" icon="minus" style="color:red;"
                                        @click="handlerClick('delete', index)"
                                        v-if="Array.isArray(formVal.textInfo) && formVal.textInfo.length != 1" />
                                    <!-- </a-tooltip> -->
                                </a-col>
                            </a-row>
                        </div>
                    </div>
                    <div class="ShowContentWrap-info-wrap-table" v-else-if="formVal.fill == 'table'"
                        :style="styleObj(formVal.showType, 'table', formVal.imgPosition, formVal.fill)">
                        <table class="table">
                            <thead class="table-thead">
                                <tr class="table-thead-tr">
                                    <!-- @change="draggbaleChange" -->
                                    <draggable v-model="formVal.tableHead" class="table-thead-tr-draggable" tag="tr">
                                        <th v-for="(item, index) in formVal.tableHead" :key="`${item.key}`"
                                            class="table-thead-tr-draggable-th">
                                            <div class="table-thead-tr-draggable-th-wrap">
                                                <a-input v-model="item.title" placeholder="请输入">
                                                    <a-icon slot="prefix" class="dragIcon" type="drag" />
                                                    <a-space slot="suffix">
                                                        <a-icon style="color: red;" type="delete"
                                                            @click="handTableDele('column', index)"
                                                            v-if="formVal.tableHead.length > 1" />
                                                        <a-popover placement="topRight" trigger="click">
                                                            <template slot="content">
                                                                <a-row :gutter="[0, 12]">
                                                                    <a-col :span="6">占比</a-col>
                                                                    <a-col :span="18">
                                                                        <a-input-number :min="1" style="width: 100%;"
                                                                            v-model="item.width"></a-input-number>
                                                                    </a-col>
                                                                    <a-col :span="6">对齐</a-col>
                                                                    <a-col :span="18">
                                                                        <a-select
                                                                            :options="[{ label: '居中对齐', value: 'center', }, { label: '居左对齐', value: 'left', }, { label: '居右对齐', value: 'right', }]"
                                                                            v-model="item.align"
                                                                            style="width: 100%;"></a-select>
                                                                    </a-col>
                                                                </a-row>
                                                            </template>
                                                            <span slot="title">
                                                                <!-- <span v-if="item.title">【{{ item.title }}】</span> -->
                                                                列设置</span>
                                                            <a-icon type="setting" style="cursor: pointer;"></a-icon>
                                                        </a-popover>
                                                    </a-space>
                                                </a-input>
                                            </div>
                                        </th>
                                    </draggable>
                                </tr>
                            </thead>
                            <draggable v-model="formVal.tableData" tag="tbody" class="table-draggable">
                                <tr v-for="(item, index) in formVal.tableData" :key="`${item.id}${index}`"
                                    class="table-draggable-tr">
                                    <td class="option">
                                        <a-space align="center">
                                            <a-icon slot="prefix" class="dragIcon" type="drag" />
                                            <a-icon slot="suffix" style="color: red;" type="delete"
                                                @click="handTableDele('row', index)" />
                                        </a-space>
                                    </td>
                                    <td scope="row" v-for="it in formVal.tableHead" :key="it.key"
                                        class="table-draggable-tr-td">
                                        <a-textarea v-model="item[it.key]" :autosize="{ minRows: 2, maxRows: 6 }"
                                            placeholder="请输入"></a-textarea>
                                    </td>
                                </tr>
                            </draggable>
                        </table>
                    </div>
                </div>
            </a-form-model>
        </div>
    </div>
</template>
<script>
import draggable from 'vuedraggable';
import PPTUpImg from '../PPTUpImg';
import { stylePosition } from './static';

export default {
    name: 'ShowContent',
    components: {
        draggable,
        PPTUpImg,
    },
    props: {
        formVal: {
            type: [Object, Array]
        },
        onChangeForm: {
            type: Function,
        }
    },
    data() {
        return {
            flexDirectionType: {
                top: 'column',
                bottom: 'column-reverse',
                left: 'row',
                right: 'row-reverse',
            },
        }
    },
    methods: {
        filterClass(event) {
            return event.target.className.includes('isDrag');
        },
        handlerClick(type, i) {
            let arr = this.formVal.textInfo;
            if (type == 'add') {
                arr.push({ label: '', value: '' });
            } else if (type == 'delete') {
                arr.splice(i, 1)
            }
        },
        handlerTableClick(type) {
            let tableHead = this.formVal.tableHead;
            let tableData = this.formVal.tableData;
            if (type == 'column') {
                tableHead.push({
                    title: '',
                    dataIndex: new Date().getTime(),
                    key: new Date().getTime(),
                    id: new Date().getTime(),
                    width: 1,
                    align: 'center',
                })
            } else if (type == 'row') {
                tableData.push({
                    id: new Date().getTime(),
                })
            }
        },
        handTableDele(type, i) {
            let tableHead = this.formVal.tableHead;
            let tableData = this.formVal.tableData;
            if (type == 'column') {
                tableHead.splice(i, 1)
            } else if (type == 'row') {
                tableData.splice(i, 1)
            }
        },
        styleObj(wrapType, type, position, fillType) {
            return stylePosition(wrapType, type, position, fillType)

        },
    },
    mounted() {
    },
    computed: {
        flexDirection() {
            let formVal = this.formVal;
            let res = this.flexDirectionType[formVal.imgPosition];
            return res;
        },
        isShowImg() {
            return ['picture', 'textAndPicture'].includes(this.formVal.showType)
        },
        isShowText() {
            return ['text', 'textAndPicture'].includes(this.formVal.showType)
        },
    },
    watch: {
        formVal: {
            handler(nVal, Oval) {
            },
            immediate: true,
            deep: true,
        },
    }
}
</script>
<style lang="less" scoped>
.ShowContentWrap {
    width: 100%;
    height: 100%;
    // background-color: orange;
    display: flex;
    // flex-direction: row-reverse;
    padding: 12px;

    &-img {
        width: calc(50% - 40px);
        padding: 0px 12px;
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;

        &-before {
            flex: 1;
        }

        &-after {
            flex: 1;
        }

        &-title {
            width: 100%;
            text-align: center;
            margin-bottom: 8px;
            font-size: 16px;
            font-weight: 560;
        }
    }

    &-info {
        // width: calc(50% + 40px);
        // flex: 0 0 100%;

        &-header {
            &-button {
                margin: 8px 0px;
            }
        }

        &-wrap {
            // height: calc(100vh - 280px);

            &-text {
                // overflow-y: auto;
                // overflow-x: hidden;
                height: 100%;
                // padding: 8px;

                &-row {}
            }

            &-table {
                margin-top: 12px;
                // height: 100%;
                overflow-x: auto;

                .table {

                    // 表头
                    &-thead {
                        position: sticky;
                        top: 0px;
                        z-index: 2;

                        &-tr {
                            &-draggable {
                                display: flex;
                                flex-wrap: nowrap;
                                padding-left: 40px;
                                background-color: #f5f7fa;

                                &-th {
                                    flex: 0 0 auto;
                                    width: 170px;

                                    &-wrap {
                                        display: flex;
                                        align-items: center;

                                        ::v-deep {
                                            .ant-input {
                                                background-color: #f5f7fa;
                                                padding-right: 50px;
                                            }
                                        }

                                    }
                                }
                            }
                        }
                    }

                    // 表内容
                    &-draggable {
                        &-tr {
                            display: flex;
                            flex-wrap: nowrap;
                            position: relative;

                            .option {
                                // position: absolute;
                                width: 40px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                background-color: #ffffff;
                                position: sticky;
                                left: 0px;
                                z-index: 1;
                            }

                            &-td {
                                flex: 0 0 auto;
                                width: 170px;
                            }
                        }
                    }
                }

            }
        }
    }
}

.dragIcon {
    cursor: move;
}
</style>